<template>
	<uni-nav-bar shadow left-icon="left"leftText="返回" rightText="保存" title="寄件服务" @clickLeft="back"
		@clickRight="" />
	<view class="page-container">
		<view class="content">
			<view class="form-section">
				<view class="form-item">
					<view class="label">快递单号</view>
					<view class="input-wrapper">
						<input type="text" v-model="formData.expressNo" placeholder="请输入快递单号" />
					</view>
				</view>
				<view class="form-item">
					<view class="label">期望收货时间</view>
					<view class="input-wrapper">
						<uni-datetime-picker v-model="formData.expectTime" type="datetime" :clear-icon="false"
							class="datetime-picker" />
					</view>
				</view>
				<view class="form-item">
					<view class="label">费用(元)</view>
					<view class="input-wrapper">
						<input type="number" v-model="formData.fee" placeholder="请输入费用" />
					</view>
				</view>
				<view class="address-section">
					<view class="address-item">
						<view class="address-header">
							<uni-icons custom-prefix="iconfont" type="location" size="20" color="#333333" />
							<text class="address-title">寄出地址</text>
						</view>
						<view class="address-content">
							<view class="form-item">
								<textarea v-model="formData.senderAddress" placeholder="请输入寄件地址"
									class="address-textarea" />
							</view>
						</view>
					</view>
					<view class="address-divider">
						<uni-icons custom-prefix="iconfont" type="arrow-down" size="20" color="#666666" />
					</view>
					<view class="address-item">
						<view class="address-header">
							<uni-icons custom-prefix="iconfont" type="location" size="20" color="#333333" />
							<text class="address-title">收货地址</text>
						</view>
						<view class="address-content">
							<view class="form-item">
								<textarea v-model="formData.deliverAddress" placeholder="请输入收件地址"
									class="address-textarea" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="submit-section">
				<button class="submit-btn" @click="handleSubmit">确认提交</button>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { publishOrder } from '../../api/order';

interface FormData {
  expressNo: string;
  expectTime: string; // 时间字符串，格式为 "yyyy-MM-dd HH:mm:ss"
  fee: number; // 费用，数值型
  senderAddress: string;
  deliverAddress: string;
}

// 定义表单数据
const formData = ref<FormData>({
  expressNo: '',
  expectTime: '',
  fee: null, // 初始化为 null 或者 0
  senderAddress: '',
  deliverAddress: ''
});

// 格式化日期函数，将 "yyyy-MM-dd HH:mm:ss" 转换为 "yyyy-MM-ddTHH:mm:ss"
function formatDateToISO(dateString: string): string {
  if (!dateString) return ''; // 确保字段存在，避免报错
  return dateString.replace(" ", "T");
}

// 提交表单处理逻辑
const handleSubmit = async () => {
  // 格式化 expectTime 字段
  formData.value.expectTime = formatDateToISO(formData.value.expectTime);

  // 调用发布订单 API
  const response = await publishOrder(formData.value);
  console.log(response)
  if (response.code === 200) {
    uni.showToast({
      title: '发布成功',
    });

    // 返回上一页
    uni.navigateBack({
      delta: 1,
    });
  }
};

// 返回上一页
const back = () => {
  uni.navigateBack({
    delta: 1,
  });
};
</script>
<style scoped>
	page {
		height: 100%;
	}

	.page-container {
		min-height: 100%;
		background-color: #f5f5f5;
		padding: 20rpx;
	}

	.header {
		padding: 30rpx 0;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		text-align: center;
	}

	.content {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 30rpx;
	}

	.form-section {
		margin-bottom: 40rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.label {
		font-size: 14px;
		color: #333333;
		margin-bottom: 16rpx;
	}

	.input-wrapper {
		background-color: #f8f8f8;
		border-radius: 8px;
		padding: 20rpx;
	}

	.input-wrapper input {
		font-size: 14px;
		color: #333333;
		width: 100%;
	}

	.datetime-picker {
		width: 100%;
	}

	.address-section {
		margin-top: 40rpx;
	}

	.address-item {
		background-color: #f8f8f8;
		border-radius: 8px;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.address-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.address-title {
		font-size: 14px;
		color: #333333;
		margin-left: 8rpx;
		font-weight: 500;
	}

	.address-content {
		padding-left: 28rpx;
	}

	.address-content .form-item {
		margin-bottom: 20rpx;
	}

	.address-input {
		width: 100%;
		height: 80rpx;
		background-color: #ffffff;
		border-radius: 8px;
		padding: 0 20rpx;
		font-size: 14px;
		color: #333333;
	}

	.address-textarea {
		width: 100%;
		height: 160rpx;
		background-color: #ffffff;
		border-radius: 8px;
		padding: 20rpx;
		font-size: 14px;
		color: #333333;
	}

	.address-divider {
		display: flex;
		justify-content: center;
		margin: 20rpx 0;
	}

	.submit-section {
		margin-top: 60rpx;
	}

	.submit-btn {
		background-color: #007aff;
		color: #ffffff;
		font-size: 16px;
		border-radius: 8px;
		padding: 20rpx 0;
	}

	.submit-btn:active {
		opacity: 0.8;
	}
</style>